<template>
    <div class="Game">
        <h2>游戏列表</h2>
        <!-- 将数据传递给插槽使用者 - 父组件 -->
        <slot :games="games"></slot>
        <!-- <ul>
            <li v-for="item in games" :key="item.id">{{ item.name }}</li>
        </ul> -->
    </div>
</template>

<script lang="ts" setup name="Game">
import {ref, reactive} from 'vue'
    let games = reactive([
        {id: 1,name: '英雄联盟'},
        {id: 2,name: '王者荣耀'},
        {id: 3,name: '和平精英'},
        {id: 4,name: 'csgo'},
    ])
</script>

<style scoped>
    .Game{
        width: 200px;
        height: 300px;
        background-color: sandybrown;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
    h2{
        text-align: center;
        background-color: aliceblue;
    }
</style>